<template>
  <div class="home">
    <div class="home-nav">
      <div class="home-header">
        <div class="block home-head">
          <el-avatar :size="40" :src="circleUrl"></el-avatar>
        </div>
        <span>{{ name }}</span>
      </div>
      <div>
        <el-menu
          :default-active="active"
          unique-opened
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          router
          @select="getIndex"
        >
          <div v-for="item in roletreelist" :key="item.index">
              <el-menu-item v-if="!item.children" :index="item.index">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.name }}</span>
              </el-menu-item>
              <el-submenu v-else :index="item.index">
                <template slot="title">
                  <i :class="item.icon"></i>
                  <span>{{ item.name }}</span>
                </template>
                  <el-menu-item  v-for="child in item.children" :key="child.index"  :index="child.index">{{ child.name}}</el-menu-item>
              </el-submenu>
          </div>
        </el-menu>
      </div>
    </div>

    <div class="home-content">
      <div class="home-right-head">
        <el-breadcrumb
          separator-class="el-icon-arrow-right"
          style="line-height: 50px"
        >
          <el-breadcrumb-item :to="{ path: '/home/main' }" >首页</el-breadcrumb-item>
          <el-breadcrumb-item v-for="item in caption" :key="item">{{item}}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="block home-right-photo">
          <span>欢迎您,{{ name }}</span>
          <router-link to="/home/userinfo"><el-avatar :size="50" :src="circleUrl"></el-avatar></router-link>
        </div>
      </div>
      <el-card class="router-box"><router-view></router-view></el-card>
    </div>
  </div>
</template>

<script>
import {verifyToken,getuser} from '@/apis/user';
// import {hash} from '@/router/index'
export default {
  data() {
    return {
      caption:[],
      circleUrl:
        "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1973670407,3684163024&fm=26&gp=0.jpg",
      name: "臭臭世界,污水沟外卖",
      active:'/home/main',
      treelist: [
        { index: '/home/main', icon: "el-icon-house", name: "后台管理",role:["super","normal"]},
        {index: '/home/ordermanagement',icon: "el-icon-s-order",name: "订单管理",role:["super","normal"]},
        {index: '/home/commmanagement',icon: "el-icon-goods",name: "商品管理", role:["super","normal"],
          children: [
            { index: "/home/commmanagement/commlist", name: "商品列表" },
            { index: "/home/commmanagement/commadd", name: "商品添加"},
            { index: "/home/commmanagement/commclass", name: "商品分类"},
          ],
        },
        {index: '/home/storemanagement',icon: "el-icon-s-shop",name: "店铺管理",role:["super"]},
        {index: '/home/idmanagement',icon: "el-icon-user",name: "账号管理",role:["super"],
          children: [
            { index: "/home/idmanagement/idlist", name: "账号列表" },
            { index: "/home/idmanagement/addid", name: "添加账号" },
            {index: "/home/idmanagement/amendid", name: "修改密码"},
          ],
        },
        {index: '/home/salesstatics',icon: "el-icon-pie-chart", name: "销售统计",role:["super"],
          children: [
            { index: "/home/salesstatics/commstatistics", name: "商品统计"},
            { index: "/home/salesstatics/orderstatistics", name: "订单统计"},
          ],
        },
      ],
    };
  },
  methods: {
    getIndex(i){
      this.caption=[];
      let twoStage= String(i).substring(0,String(i).lastIndexOf('/'))
      this.locating((this.treelist),i,twoStage);
    },
    locating(list,hash,twoha){
      for (let i = 0; i < list.length; i++) {
        if(list[i].children&&list[i].index==twoha){
          this.caption.push(list[i].name)
          this.locating((list[i].children),hash)
        }else if(list[i].index==hash){
          this.caption.push(list[i].name)
          return
        }
      }
    }
   
  },
  computed:{
    roletreelist(){
      return this.treelist.filter(v=> v.role.includes(localStorage.role))
    }

  },
  created(){
     this.getIndex(this.$route.phth)
    this.active=this.$route.path;
    verifyToken({token:localStorage.token}).then(res=>{
      if(res.data.code!=0){
        this.$message({type: 'error',message: '臭臭世界提示:你的身份信息已过期,请重新登录!',center: true});
        this.$router.push("/"); 
      }
    })
    getuser({id:localStorage.id}).then(res=>{
      this.name="臭臭世界:"+res.data.accountInfo.account;
      sessionStorage.userimg=res.data.accountInfo.imgUrl
      this.circleUrl=res.data.accountInfo.imgUrl;
    })
    this.$bus.on("headerchange",()=>{
       getuser({id:localStorage.id}).then(res=>{
      this.name="臭臭世界:"+res.data.accountInfo.account;
      sessionStorage.userimg=res.data.accountInfo.imgUrl
      this.circleUrl=res.data.accountInfo.imgUrl;
    })
    })
      this.getIndex(this.$route.path)
      },
      

};
</script>
<style lang='less' scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
}
.home-nav {
  width: 200px;
  height: 100%;
  background: #545c64;
}
.home-header {
  width: 199px;
  display: flex;
  position: relative;
  align-items: center;
  padding: 10px 0;
  .home-head {
    margin-left: 20px;
    margin-right: 5px;
  }
  span {
    font-size: 14px;
    color: #fff;
  }
}
.el-menu {
  border-right: 0;
}
.home-content {
  width:100%;
  height: 100%;
  background: #e9ebee;
  flex: 1;
  display: flex;
  flex-direction: column;

}
.home-right-head {
  height: 50px;
  line-height: 50px;
  background: #fff;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
}
.home-right-photo {
  display: flex;
  span {
    line-height: 50px;
    display: block;
    margin-left: 10px;
  }
}
.router-box{
  width: 96%;
  height: 100%;
  margin: 0 auto;
  margin-top: 20px;
  overflow: scroll;

}
</style>
